<template>
  <view id="lifebox">
    <!-- 头部 -->
    <view class="header" :style="headerStyle">
      <view :style="'height: ' + statusBarHeight"> </view>
      <view class="header-info">
        <view class="title" :style="headerTextStyle">
          <view class="navleft">
            <image src="../../static/index/gps.png" mode="" class="navleft-img"></image>
            <view class="navposition" :style="headerdingwei" @tap="get_Location()">
              {{CityName}}
            </view>
          </view>
          <view class="navcent" @click="topsearch()">
            <u-search shape="round" height="25" bg-color="#FAFAFA" :show-action="false"></u-search>
          </view>
          <view class="navright">
            <image src="../../static/index/bank.png" mode="" class="navright-imgone"></image>
            <image src="../../static/index/plus.png" mode="" class="navright-imgtwo"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <!-- banner图 -->
    <view class="bannerbox">
      <u-swiper :list="list1" :autoplay="true" :circular="true" height="280"></u-swiper>
    </view>
    <!-- banner图 -->
    <!-- 金刚区 -->
    <view class="kernel">
      <view class="kernel-top">
        <view class="ker-top-item">
          <image src="../../static/life/life1.png" mode="" class="ker-item-img"></image>
          <view class="ker-item-textbox">
            <view style="font-weight: bold; font-size: 28rpx;">生活缴费</view>
            <view style="color: #8B8B8B;font-size: 20rpx;">100+服务</view>
          </view>
        </view>

        <view class="ker-top-item">
          <image src="../../static/life/life2.png" mode="" class="ker-item-img"></image>
          <view class="ker-item-textbox">
            <view style="font-weight: bold; font-size: 28rpx;">政务服务</view>
            <view style="color: #8B8B8B;font-size: 20rpx;">线上办 马上办</view>
          </view>
        </view>

        <view class="ker-top-item">
          <image src="../../static/life/life3.png" mode="" class="ker-item-img"></image>
          <view class="ker-item-textbox">
            <view style="font-weight: bold; font-size: 28rpx;">电影演出</view>
            <view style="color: #8B8B8B;font-size: 20rpx;">数币支付满减</view>
          </view>
        </view>
      </view>
      <view class="kerbel-bot">
        <view class="ker-bot-item">
          <u-grid :col="5">
            <u-grid-item>
              <image src="../../static/life/lifeto1.png" mode="" class="ker-bot-img"></image>
              <view class="ker-bot-tit">
                约惠齐鲁
              </view>
            </u-grid-item>

            <u-grid-item>
              <image src="../../static/life/lifeto2.png" mode="" class="ker-bot-img"></image>
              <view class="ker-bot-tit">
                药品追溯
              </view>
            </u-grid-item>

            <u-grid-item>
              <image src="../../static/life/lifeto3.png" mode="" class="ker-bot-img"></image>
              <view class="ker-bot-tit">
                党费
              </view>
            </u-grid-item>

            <u-grid-item>
              <image src="../../static/life/lifeto4.png" mode="" class="ker-bot-img"></image>
              <view class="ker-bot-tit">
                电影演出
              </view>
            </u-grid-item>

            <u-grid-item>
              <image src="../../static/life/lifeto5.png" mode="" class="ker-bot-img"></image>
              <view class="ker-bot-tit">
                更多
              </view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </view>
    <!-- 金刚区 -->
    <!-- 内容区 -->
    <view class="contentbg">
      <view class="kermargin">

      </view>
      <!-- 生活缴费 -->
      <view class="lifepay">
        <view class="lifepay-left">
          <view class="pay-left-tit">
            生活缴费
          </view>
          <view class="pay-left-text">
            <view style="font-weight: bold;">轻松缴费 预约生活</view>
            <view style="font-size: 26rpx;">海量缴费 等你体验</view>
          </view>
          <button class="pay-left-but">去查看</button>
        </view>
        <view class="lifepay-right">
          <view class="pay-left-tit">
            政务服务
          </view>
          <view class="pay-right-item">
            <view class="pay-item-left">
              <view class="pay-item-tit">
                住房公积金
              </view>
              <view class="pay-item-text">
                查询公积金明细
              </view>
            </view>
            <view class="pay-item-right">
              <button class="pay-left-but">去查看</button>
            </view>
          </view>

          <view class="pay-right-item" style="margin-top: 30rpx;">
            <view class="pay-item-left">
              <view class="pay-item-tit">
                住房公积金
              </view>
              <view class="pay-item-text">
                查询公积金明细
              </view>
            </view>
            <view class="pay-item-right">
              <button class="pay-left-but">去查看</button>
            </view>
          </view>
        </view>
      </view>
      <!-- 生活缴费 -->
      <!-- 正在热映 -->
      <view class="hotplay">
        <view class="hotplay-top">
          <view class="hotplay-tit">
            正在热映
          </view>
          <view class="hotplay-text">
            树币支付40元减<span>20</span>元
          </view>
          <view class="hotplay-text1">
            更多
          </view>
        </view>
        <view class="hotplay-bot">
          <!-- 滑动轮播图 -->
          <view class="wrap">
            <view class="orange-box">
              <orange-longswiper :list="listData" :config="configData" @tapMore="tapMore" @tapList="tapList">
              </orange-longswiper>
            </view>
          </view>
          <!-- 滑动轮播图 -->
        </view>
      </view>
      <!-- 正在热映 -->
      <!-- 本地、好物选项卡 -->
      <view class="localgoodbox">
        <view class="lgbox-titbox">
          <view class="lg-leftbox" :style="show ==true ?'color:#FD7117':''" @click="show = !show">
            <view class="lg-left-tit">
              本地
            </view>
            <view class="lg-left-text">
              优惠享不停
            </view>
          </view>

          <view class="lg-leftbox" :style="show ==false ?'color:#FD7117':''" @click="show = !show">
            <view class="lg-left-tit">
              好物
            </view>
            <view class="lg-left-text">
              人气必买
            </view>
          </view>
        </view>

        <view class="lgcent" v-show="show">
          <u-grid :col="2">
            <u-grid-item>
              <image src="../../static/life/f1.png" mode="" class="lgcent-img"></image>
            </u-grid-item>
            <u-grid-item>
              <image src="../../static/life/f2.png" mode="" class="lgcent-img"></image>
            </u-grid-item>
            <u-grid-item>
              <image src="../../static/life/f3.png" mode="" class="lgcent-img"></image>
            </u-grid-item>
          </u-grid>
          <view class="tit-bot">
            我是有底线的~
          </view>
        </view>
        <view class="lgcent2" v-show="!show">
          <u-grid :col="2">
            <u-grid-item>
              <image src="../../static/life/f1.png" mode="" class="lgcent-img"></image>
            </u-grid-item>
            <u-grid-item>
              <image src="../../static/life/f2.png" mode="" class="lgcent-img"></image>
            </u-grid-item>
            <u-grid-item>
              <image src="../../static/life/f3.png" mode="" class="lgcent-img"></image>
            </u-grid-item>
            <u-grid-item>
              <image src="../../static/life/f3.png" mode="" class="lgcent-img"></image>
            </u-grid-item><u-grid-item>
              <image src="../../static/life/f3.png" mode="" class="lgcent-img"></image>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
      <!-- 本地、好物选项卡 -->
    </view>
    <!-- 内容区 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: true,
        CityName: '泰安市',
        listData: [{
            id: 1,
            img: "/static/life/movie1.png",
            subject: "铃芽之旅",
          },
          {
            id: 2,
            img: "/static/life/movie2.png",
            subject: "保你平安",
          },
          {
            id: 3,
            img: "/static/life/movie3.png",
            subject: "忠犬八公",
          },
          {
            id: 4,
            img: "/static/life/movie4.png",
            subject: "不止不休",
          },
          {
            id: 5,
            img: "/static/life/movie5.png",
            subject: "暴风",
          },
          {
            id: 6,
            img: "/static/life/movie6.png",
            subject: "正青春",
          },
          {
            id: 7,
            img: "/static/life/movie7.png",
            subject: "柯南",
          }
        ],
        configData: {
          // title:'我看过的',
          // titlemore:'全部>',
          // listmore:'查看更多',
          moreurl: 'url',
          multiple: 3,
          radius: 10,
          height: 240,
          nextMargin: 80
        },
        list1: ['/static/life/sw1_01.png',
          '/static/life/sw2_01.png',
          '/static/life/sw3_01.png'
        ],
        appData: {},
        headerData: {
          bgColor: "",
          textColor: "",
          dingwei: "",
        },
      }
    },
    // 获取定位方法
    getLocationInfo() {
      let _this = this;
      uni.getLocation({
        type: 'gcj02',
        success(res) {
          let lat = res.latitude;
          let lng = res.longitude;
          let key =
            'M7XBZ-2TBKJ-TPBFS-KV3RM-F5QQF-OFFNV'; //申请地址：https://lbs.qq.com/dev/console/application/mine
          uni.request({
            url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + lat + ',' + lng +
              '&key=' + key,
            method: "GET",
            success(ress) {
              let data = ress.data;
              let CityName = ress.data.result.address_component.city;
              _this.CityName = CityName
              uni.setStorage({
                key: 'City_Name',
                data: CityName
              });
            },
            fail() {
              uni.showToast({
                'title': '对不起，数据获取失败！',
                'icon': 'none'
              })
            }
          })
        },
        fail(res) {
          uni.showToast({
            'title': '对不起，获取位置失败！',
            'icon': 'none'
          })
        }
      })
    },
    computed: {
      navigationBarHeight() {
        return (this.appData.statusBarHeight * 2 + 88) + 'rpx'
      },
      statusBarHeight() {
        return (this.appData.statusBarHeight * 2 + 4) + 'rpx'
      },
      headerStyle() {
        return `height:${(this.appData.statusBarHeight * 2 + 88) + 'rpx'};background:${this.headerData.bgColor}`
      },
      headerTextStyle() {
        return `color:${this.headerData.textColor}`
      },
      headerdingwei() {
        return `color:${this.headerData.dingwei}`
      },

    },
    onShow() {
      const res = uni.getSystemInfoSync()
      this.appData = res;
    },
    onLoad() {
      let _this = this;
      uni.$on('getCityName', function(res) {
        _this.CityName = res
      });
    },
    methods: {
      topsearch() {
        uni.navigateTo({
          url: "/pages/index/search"
        })
      },
      onPageScroll(e) {
        if (e.scrollTop >= this.appData.statusBarHeight) {
          this.headerData.bgColor = '#fff'
          this.headerData.textColor = '#000'
          this.headerData.dingwei = '#000'
        } else {
          this.headerData.bgColor = ''
          this.headerData.textColor = ''
          this.headerData.dingwei = ''
        }
      },
      get_Location() {
        uni.navigateTo({
          url: '/pages/Location/Location'
        })
      },
      tapMore(moreurl) {
        console.log(moreurl);
      },
      tapList(e) {
        console.log(e.id, e.index);
      }
    }
  }
</script>

<style lang="less">
  // 头部
  .bg {
    image {
      width: 100%;
    }
  }

  .header {
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    top: 0;
    transition: all .5s;
    background: rgba(255, 255, 255, 0);

    .header-info {
      height: 88rpx;
      margin-top: 30rpx;

      .title {
        display: flex;
        width: 100vw;
        padding: 0 15rpx;
        box-sizing: border-box;
        text-align: center;
        color: #fff;
        transition: all .5s;

        .navleft {
          display: flex;
          width: 25vw;
          height: 50rpx;

          .navleft-img {
            padding: 10rpx 0;
            width: 20rpx;
            height: 30rpx;
          }

          .navposition {
            color: white;
            font-weight: 520;
            font-size: 38rpx;
            padding-left: 8rpx;
            border: none;
          }
        }

        .navcent {
          width: 50vw;
          height: 50rpx;
        }

        .navright {
          display: flex;
          justify-content: space-around;
          width: 28vw;
          height: 50rpx;

          .navright-imgone {
            width: 50rpx;
            height: 50rpx;
          }

          .navright-imgtwo {
            width: 50rpx;
            height: 50rpx;
          }
        }
      }

    }
  }

  // 头部
  // banner图
  .bannerbox {
    width: 100vw;
    position: relative;
  }

  // banner图
  // 金刚区
  .kernel {
    position: absolute;
    top: 450rpx;
    left: 37.5rpx;
    width: 90vw;
    height: 300rpx;
    border-radius: 20rpx;
    background-color: white;
    padding: 20rpx;
    box-sizing: border-box;

    .kernel-top {
      display: flex;

      .ker-top-item {
        width: 33%;
        // height: 60rpx;
        display: flex;

        .ker-item-img {
          margin-top: 15rpx;
          width: 18%;
          height: 60%;
        }

        .ker-item-textbox {
          margin-left: 16rpx;
        }
      }
    }

    .ker-bot-item {
      padding-top: 40rpx;
    }

    .ker-bot-img {
      width: 80rpx;
      height: 80rpx;
    }

    .ker-bot-tit {
      margin-top: 15rpx;
      font-size: 20rpx;
    }
  }

  // 金刚区
  // 内容区
  .contentbg {
    width: 100vw;
    // height: 800rpx;
    background-color: #EFEFEF;

    .kermargin {
      width: 90vw;
      height: 220rpx;
      // margin-bottom: 40rpx;
    }

    // 生活缴费
    .lifepay {
      padding-bottom: 30rpx;
      width: 90vw;
      margin: auto;
      // height: 800rpx;
      // background-color: aqua;
      display: flex;
      justify-content: space-between;

      .lifepay-left {
        padding: 20rpx;
        border-radius: 20rpx;
        box-sizing: border-box;
        width: 49%;
        height: 350rpx;
        background-color: white;

        .pay-left-tit {
          font-size: 40rpx;
          font-weight: bold;
        }

        .pay-left-text {
          margin-top: 30rpx;
          color: #273E56;
        }

        .pay-left-but {
          padding: 0;
          margin-top: 50rpx;
          width: 100rpx;
          height: 60rpx;
          line-height: 60rpx;
          border-radius: 400rpx;
          border: none;
          font-size: 25rpx;
          margin-right: 200rpx;
          color: #fff;
          background-image: linear-gradient(to right, #4A79DB, #7AABF8);
        }
      }

      .lifepay-right {
        padding: 20rpx;
        border-radius: 20rpx;
        box-sizing: border-box;
        width: 49%;
        height: 350rpx;
        background-color: #fff;

        .pay-left-tit {
          font-size: 40rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
        }

        .pay-right-item {
          display: flex;
          margin-top: 10rpx;

          .pay-item-left {
            width: 60%;
            margin-top: 20rpx;

            .pay-item-tit {
              font-size: 30rpx;
              font-weight: bold;
              color: #352122;
            }

            .pay-item-text {
              font-size: 20rpx;
              color: #746564;
            }
          }

          .pay-item-right {
            width: 40%;

            .pay-left-but {
              padding: 0;
              margin-top: 30rpx;
              width: 100rpx;
              height: 60rpx;
              font-size: 25rpx;
              line-height: 60rpx;
              border-radius: 400rpx;
              border: none;
              color: #fff;
              background-image: linear-gradient(to right, #F95932, #FC8654);
            }
          }
        }
      }
    }

    // 生活缴费
    // 正在热映
    .hotplay {
      width: 90vw;
      // height: 1600rpx;
      margin: auto;
      border-radius: 30rpx;
      padding: 30rpx;
      padding-bottom: 10rpx;
      box-sizing: border-box;
      background-color: #fff;

      .hotplay-top {
        display: flex;
        justify-content: space-between;

        .hotplay-tit {
          font-size: 40rpx;
          font-weight: bold;
        }

        .hotplay-text {
          padding-top: 6rpx;
          box-sizing: border-box;
          margin-right: 50rpx;
          color: #6D6D6D;
        }

        .hotplay-text1 {
          padding-top: 6rpx;
          box-sizing: border-box;
          color: #6D6D6D;
        }

      }

      .hotplay-bot {
        margin-top: 40rpx;
        width: 80vw;
        // height: 1000rpx;

        .wrap {
          // height: 1000rpx;
        }

        .botitem-but {
          margin: 0;
          padding: 0;
          margin-top: 20rpx;
          line-height: 80rpx;
          width: 150rpx;
          border: none;
          background-image: ;
          border-radius: 40rpx;
          height: 80rpx;
          color: white;
          background-image: linear-gradient(to right, #4A79DB, #7AABF8);
        }

      }
    }


    // 正在热映
    // 本地好物选项卡
    .localgoodbox {
      width: 90vw;
      margin: auto;
      margin-top: 20rpx;
      // margin-bottom: 500rpx;
      // height: 500rpx;

      .lgbox-titbox {
        display: flex;
        justify-content: space-around;

        .lg-leftbox {
          text-align: center;

          .lg-left-tit {
            font-size: 40rpx;
            font-weight: bold;
          }
        }
      }

      .lgcent {
        margin-top: 20rpx;


        .lgcent-img {
          width: 43vw;
          margin-bottom: 20rpx;
        }

        .tit-bot {
          color: #9A9A9A;
          margin-top: 50rpx;
          padding-bottom: 140rpx;
          text-align: center;
        }
      }

      .lgcent2 {
        margin-top: 20rpx;


        .lgcent-img {
          width: 43vw;
          margin-bottom: 20rpx;
        }

        .tit-bot {
          color: #9A9A9A;
          margin-top: 50rpx;
          padding-bottom: 140rpx;
          text-align: center;
        }
      }
    }

    // 本地好物选项卡
  }

  // 内容区
</style>